<template>
  <view class="service-search">
    <view class="service-search__box">
      <view class="service-search__icon">🔍</view>
      <input 
        class="service-search__input" 
        :placeholder="placeholder" 
        v-model="keyword"
        confirm-type="search"
        @confirm="handleConfirm"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索服务项目'
  },
  value: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['search', 'update:value']);

const keyword = ref(props.value);

watch(() => props.value, (newVal) => {
  keyword.value = newVal;
});

watch(keyword, (newVal) => {
  emit('update:value', newVal);
});

const handleConfirm = () => {
  if (!keyword.value.trim()) return;
  emit('search', keyword.value);
};
</script>

<style lang="scss" scoped>
.service-search {
  background-color: #07c160;
  padding: 10px 15px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  
  &__box {
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
  
  &__icon {
    font-size: 16px;
    margin-right: 5px;
    color: #999;
  }
  
  &__input {
    flex: 1;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #333;
  }
}
</style>
